<template>
  <div class="page device-page">
    <div class="page-title-box card-wrapper">
      <span class="page-title-text">人员管理</span>
      <div class="page-title-options">
        <a-button type="primary" @click="handlePopCreateModal">添加人员</a-button>
      </div>
    </div>
    <div class="page-list-content card-wrapper">
      <a-table :data-source="tableData" :columns="columns" :pagination="false">
        <template #bodyCell="{record, column}">
          <template v-if="column.dataIndex === 'status'">
            <span v-if="record.status === PersonStatus.Normal">正常</span>
            <span class="status-text-delete" v-if="record.status === PersonStatus.Deleted">已删除</span>
          </template>
          <template v-if="column.dataIndex === 'authType'">
            <span v-if="record.authType === UserAuthType.APPLY">申请</span>
            <span v-if="record.authType === UserAuthType.APPROVE">审批</span>
            <span v-if="record.authType === UserAuthType.ALL">申请|审批</span>
          </template>
          <template v-if="column.dataIndex === 'option'">
            <a-button type="link" @click="handlePopEditModal(record)" v-if="record.status !== PersonStatus.Deleted">编辑</a-button>
            <a-button type="link" @click="handlePopAuthModal(record)" v-if="record.status !== PersonStatus.Deleted">分配权限</a-button>
            <a-button type="link" danger v-if="record.status === PersonStatus.Normal" @click="setPersonStatus(record, PersonStatus.Deleted)">删除</a-button>
            <a-button type="link" v-if="record.status === PersonStatus.Deleted" @click="setPersonStatus(record, PersonStatus.Normal)">恢复</a-button>
          </template>
        </template>
      </a-table>
      <a-modal v-model:visible="modalVisible" width="40%" :title="editFlag ? '编辑人员' : '添加人员'" :footer="null">
        <a-form
            ref="formRef"
            :model="formState"
            name="basic"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 16 }"
            autocomplete="off"
            @finish="onFinish">
          <a-form-item
              label="账户ID"
              name="accountId"
              :rules="[{ required: true, trigger: 'blur', message: '账户ID必填' }]">
            <a-input v-model:value="formState.accountId" />
          </a-form-item>
          <a-form-item
              label="姓名"
              name="name"
              :rules="[{ required: true, trigger: 'blur', message: '姓名必填' }]">
            <a-input v-model:value="formState.name" />
          </a-form-item>
          <a-form-item
              label="权限"
              name="authType"
              :rules="[{ required: true, trigger: 'change', message: '权限必填' }]">
            <a-select placeholder="请选择" v-model:value="formState.authType" >
              <a-select-option :value="UserAuthType.APPLY">申请</a-select-option>
              <a-select-option :value="UserAuthType.APPROVE">审批</a-select-option>
              <a-select-option :value="UserAuthType.ALL">申请|审批</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item
              label="职责"
              name="duty">
            <a-input v-model:value="formState.duty" />
          </a-form-item>
          <a-form-item
              label="所属租户"
              name="tenantName">
            <a-input v-model:value="formState.tenantName" />
          </a-form-item>
          <a-form-item
              label="租户ID"
              name="tenantId">
            <a-input v-model:value="formState.tenantId" />
          </a-form-item>
          <a-form-item
              label="备注"
              name="desc">
            <a-input v-model:value="formState.desc" />
          </a-form-item>
          <a-form-item
              label="状态"
              name="status">
            <a-select disabled allow-clear v-model:value="formState.status" >
              <a-select-option :value="PersonStatus.Normal" >正常</a-select-option>
              <a-select-option :value="PersonStatus.Deleted" >已删除</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
            <div class="btn-row">
              <a-button @click="modalVisible = false">取消</a-button>
              <a-button type="primary" html-type="submit">保存</a-button>
            </div>
          </a-form-item>
        </a-form>
      </a-modal>
      <a-modal v-model:visible="authModalVisible" width="40%" title="分配权限" :footer="null">
        <div class="form-row">
          <span class="label">用户</span>
          <span>{{currentUser.name}}</span>
        </div>
        <div class="form-row">
          <span class="label">权限</span>
          <a-select class="select-input" v-model:value="currentUser.authType" placeholder="请选择">
            <a-select-option :value="UserAuthType.APPLY">申请</a-select-option>
            <a-select-option :value="UserAuthType.APPROVE">审批</a-select-option>
            <a-select-option :value="UserAuthType.ALL">申请|审批</a-select-option>
          </a-select>
        </div>
        <div class="btn-row">
          <a-button @click="authModalVisible = false">取消</a-button>
          <a-button type="primary" @click="handleSaveUserAuth">保存</a-button>
        </div>
      </a-modal>
    </div>
  </div>
</template>

<script setup lang="ts">
import {nextTick, ref} from 'vue'
import {PersonItem, PersonStatus, ResDto, UserAuthType} from "../../types/common";
import personApi from '../../api/person/index';
import {message} from "ant-design-vue";

const modalVisible = ref(false)
const authModalVisible = ref(false)
const currentUser = ref<PersonItem>({} as never)
const editFlag = ref(false)
const formRef = ref()
const formState = ref<PersonItem>({
  id: '',
  accountId: '',
  account: '',
  name: '',
  duty: '',
  tenantId: '',
  tenantName: '',
  desc: '',
  authType: UserAuthType.APPLY,
  status: PersonStatus.Normal
})
const tableData = ref<PersonItem[]>([])
const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },{
    title: '账户ID(uuid)',
    dataIndex: 'accountId',
    key: 'accountId',
  },{
    title: '所属租户',
    dataIndex: 'tenantName',
    key: 'tenantName',
  },{
    title: '账户',
    dataIndex: 'account',
    key: 'account',
  },{
    title: '职责',
    dataIndex: 'duty',
    key: 'duty',
  },{
    title: '备注',
    dataIndex: 'desc',
    key: 'desc',
  },{
    title: '权限',
    dataIndex: 'authType',
    key: 'authType',
  },{
    title: '状态',
    dataIndex: 'status',
    key: 'status',
  },{
    title: '操作',
    dataIndex: 'option',
    key: 'option',
  },

]
const getPersonList = () => {
  personApi.getList().then((res: ResDto) => {
    if (res.data && res.data.length) {
      tableData.value = res.data
    }
  })
}
getPersonList()

const setPersonStatus = (record: PersonItem, status: PersonStatus) => {
  personApi.edit({...record, status}).then((res: ResDto) => {
    if (res.code === 0) {
      message.success('操作成功')
      getPersonList()
    } else {
      message.error(res.message)
    }
  }).catch((e: any) => {
    console.log(e)
    message.error('服务异常')
  })
}

const handlePopEditModal = (record: PersonItem) => {
  editFlag.value = true
  formState.value = JSON.parse(JSON.stringify(record))
  modalVisible.value = true
  nextTick(() => {
    formRef.value.clearValidate()
  })
}
const handlePopCreateModal = () => {
  editFlag.value = false
  formState.value = {
    id: '',
    accountId: '',
    account: '',
    name: '',
    duty: '',
    tenantId: '',
    tenantName: '',
    desc: '',
    authType: UserAuthType.APPLY,
    status: PersonStatus.Normal
  }
  modalVisible.value = true
  nextTick(() => {
    formRef.value.clearValidate()
  })
}
const onFinish = () => {
  let p
  if (editFlag.value) {
    p = personApi.edit(formState.value)
  } else {
    p = personApi.add(formState.value)
  }
  p.then((res) => {
    if (res.code === 0) {
      message.success('保存成功')
      modalVisible.value = false
      getPersonList()
    } else {
      message.error(res.message)
    }
  }).catch((e: any) => {
    message.error('服务异常')
  })
}
const handlePopAuthModal = (record: PersonItem) => {
  currentUser.value = JSON.parse(JSON.stringify(record))
  authModalVisible.value = true
}
const handleSaveUserAuth = () => {
  if (!currentUser.value.authType) {
    message.error('请选择权限')
  } else {
    personApi.editAuth({id: currentUser.value.id, authType: currentUser.value.authType}).then((res: ResDto) => {
      if (res.code === 0) {
        message.success('保存成功')
        authModalVisible.value = false
        getPersonList()
      } else {
        message.error(res.message)
      }
    }).catch((e: any) => {
      message.error('服务异常')
    })
  }
}
</script>

<style scoped lang="less">
.form-row{
  position: relative;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  .label{
    margin-right: 30px;
  }
  .select-input{
    width: 120px;
  }
}
</style>
